@import 'colors';

$success: #127A1B;
$grayedOut: #c1c9cf;
$textOnly: #4b6373;

.modules__folder-icon {
  color: $canvasDark;
  font-size: 1.25rem;
  padding-right: 0.25rem;
}

.modules__folder-icon-wrapper {
  margin-top: 1rem;
  span {
    padding-top: 0.2rem;
  }
}

.module-item__wrapper {
  margin-top: 1.25rem;

  table {
    margin-top: 1rem;
  }
}

.module-item__row {
  td {
    border: 1px solid $borderColor;
  }
}

.module-item__row-contents {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.module-item__icon {
  flex-shrink: 3;
  font-size: 1.5rem;
}

.module-item__title {
  margin-left: 1.5rem;
  flex-grow: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.module-item__points-possible {
  margin-top: 0.25rem;
  align-self: flex-start;
}

.module-item__checkmark {
  flex-shrink: 3;
  color: $success;
}

.module-item__title_wrapper {
  align-self: flex-start;
  a { color: inherit }
}

.module-item__text-only {
  color: $textOnly;
}

.module-item__row__locked {
  color: $grayedOut;
}

.modules__prerequisites {
  padding: 0 20px;
}

.modules__status-icon {
  margin: 0 16px;
}

.modules__lock-date {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

.module__attributes-wrapper {
  display: flex;
}

.module__name {
  flex: 1 1 auto;
}

.modules__completion-pill {
  margin: 0;
  padding: 1px 10px;
  border-radius: 1rem;
  border: 1px solid;
}

.modules__access-details {
  display: flex;
}

@mixin indent-sizes($class, $one, $two, $three, $four, $five) {
  .#{$class}-1 { padding-left: $one; }
  .#{$class}-2 { padding-left: $two; }
  .#{$class}-3 { padding-left: $three; }
  .#{$class}-4 { padding-left: $four; }
  .#{$class}-5 { padding-left: $five; }
}
@include indent-sizes("module-item__indent", 20px, 40px, 60px, 80px, 100px);
